<template>
    <view>

        <u-navbar :is-back="true" title="收货地址" back-text='' >
        <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<!-- <view>
                <image @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </view> -->
	    </view>
        </u-navbar>

		<view class="inputS">
		  <u-form :model="form" ref="uForm">
		   
		    <u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="收货人姓名" >
			  <u-input placeholder='请输入收货人姓名' v-model="form.name"/>
			</u-form-item>
			<u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="手机号码">
			    <u-input placeholder='请输入手机号码' v-model="form.phone"/>
			</u-form-item>
			
			<u-form-item style="padding: 0.7rem 1rem" prop="name" label-width="auto" label="所在地区">
				<view slot="right" @click="goSelect">
					<view>
						 <image style="width: 0.6rem;padding: 0rem 0.5rem;height: 1rem;" 
						 src="../../style/image/myPos/map.png" alt="">
					</view>
				</view>
			    <u-input :disabled="true" placeholder='请选择所在地区' type="" v-model="form.address"/>
			</u-form-item>
			
			<u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="">
			    <u-input type='textarea'  placeholder='请输入小区门牌等详细地址' v-model="form.detailAddress"/>
			</u-form-item>

		  </u-form>
		</view>
		
    	<u-picker mode="region" v-model="show"  :default-selector="[0]"  @confirm='confirmM' ></u-picker>

        <view class="footP" >
            <view  @click="addAddressM" style="padding: 0.7rem;display: flex;align-items: center;" >
                <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
                <view  style="color: white;margin-left: 0.2rem;">保存地址</view>
            </view>
        </view>
		
    </view>
</template>

<script lang='ts' >

 import { Component, Prop,Vue, Watch ,Emit} from 'vue-property-decorator'
 
 import { saveAddress } from "../../utils/uniApi";
 
  import { findAddressBox } from "../../utils/uniApi";


 @Component({     //   @Component  是一个装修器   不可以在下面写语句
        name: 'test',
    })


    export default class extends Vue {
 
		@Prop({
				type: String, // 父组件传递给子组件的数据类型
				required: false, // 是否必填
				default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
			}) msg!:string;
		
		
		public addressId:any='';//编辑地址传入的地址id
		public form = {
			name: "",
			phone: "",
			address: "",
			detailAddress: "",
		};

		public show=false
		   
		   
		created() {
		}
		
		onLoad(value:any){
			let dic:any = JSON.parse(decodeURIComponent(value.addressDic))
			// console.log('编辑地址输出传递的参数：'+JSON.stringify(dic));
			this.addressId = dic.id;
			this.form.name = dic.name;
			this.form.phone = dic.phone;
			var addressList = dic.address.split('-');
			if(addressList.length>1){
				this.form.detailAddress = addressList[1];
			}
			this.form.address = addressList[0];
		}
		
		onHide(){
			  uni.hideLoading();
		}

		mounted() {
			  //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
		}
		goSelect(){
			this.show = true
		}
		confirmM(data:any){
			this.form.address = data.province.label + ' ' + data.city.label + ' ' +data.area.label
		}
		//分级查询省市区
		findAddressBox(code:any){
			let params = {
				parentCode:code,
			};
			findAddressBox(params).then((res: any) => {
				// console.log('++++++++++++++++++++地址列表：' + JSON.stringify(res.data) )
			    if(res.data.code==200){
					
			    }else{
			    
			    }
			});
		}
		
		addAddressM(){
			if(this.form.name == '' || this.form.name == null){
				uni.showToast({
					title: '请输入联系人姓名',
					icon:'none',
					duration: 2000
				});
				return;
			}
			if(this.form.phone == '' || this.form.phone == null){
				uni.showToast({
					title: '请输入手机号码',
					icon:'none',
					duration: 2000
				});
				return;
			}
			if(this.form.address == '' || this.form.address == null){
				uni.showToast({
					title: '请选择地址',
					icon:'none',
					duration: 2000
				});
				return;
			}
			if(this.form.detailAddress == '' || this.form.detailAddress == null){
				uni.showToast({
					title: '请输入详细地址',
					icon:'none',
					duration: 2000
				});
				return;
			}
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				address:this.form.address+'-'+this.form.detailAddress,
				phone:this.form.phone,
				name:this.form.name,
				id:this.addressId == ''?'':parseInt(this.addressId),
			};
			// console.log('++++++++++++++++++++添加地址参数：' + JSON.stringify(params) )
			saveAddress(params).then((res: any) => {
			    if(res.data.code==200){
					uni.hideLoading();
					this.BackAddress();
			    }else{
					uni.hideLoading();
					uni.showToast({
						title: '数据加载失败,请重试',
						icon: 'none',
						duration: 2000
					});
			    }
			});
		}
		//返回
		BackAddress(){
			uni.navigateBack({
			    delta: 1,
			});
		}

    }
</script>

<style  lang="scss"  scoped>

.footP{

position: absolute;
bottom: 0;
background-color: #02af74;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>